@use "~/styles/variables.scss" as *;
@use "~taro-ui/dist/style/components/float-layout.scss" as *;

.is-day {
    .icon-container {
        background-color: rgba(36, 103, 248, 0.15);
        box-shadow: -2rpx -2rpx 5rpx rgba(0, 0, 0, 0.1);
        // background-color: rgba(246,53,168, 0.8);
        // color: #fff;
    }
}

.is-night {
    .icon-container {
        background-color: rgba(0,0,0,0.15);
    }
}
.category-page {
    padding: 0;
    .content-card {
        width: 700rpx;
        margin: 25rpx 25rpx 0 25rpx; 
        border-radius: 25rpx;
        box-sizing: border-box;
        padding-bottom: 25rpx;
        .item-title {
            font-weight: 500;
            padding: 30rpx;
        }
    }
    .btn-item {
        width: 140rpx;
        height: 150rpx;
        .icon-container {
            position: relative;
            width: 82rpx;
            height: 82rpx;
            border-radius: 15rpx;
            overflow: hidden;
            .icon-bg {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                opacity: 0.1;
                z-index: 0;
            }
            .iconfont {
                position: relative;
                z-index: 1;
            }
        }
        .icon-name {
            padding: 15rpx 0;
        }
        &.active {
            color: #f635a8;
            .icon-bg {
                background-color: #f635a8;
            }
        }
    }
    .edit-btn {
        color: #3c88ff;
        .icon-bg {
            background-color: #3c88ff;
        }
    }
    .category-form-container {
        width: 750;
        height: 70vh;
        overflow-y: auto;
        box-sizing: border-box;
        padding: 50rpx 25rpx;
        padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx); /* 兼容 iOS < 11.2 */
        padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx); /* 兼容 iOS >= 11.2 */
        .bottom-line::after {
            content: "";
            display: block;
            width: 200%;
            height: 0;
            border-bottom: 1rpx solid;
            transform: scale(0.5);
            position: relative;
            left: -50%;
        }
        .list-title-container {
            width: 100%;
            .list-title {
                line-height: 60rpx;
                padding: 15rpx 36rpx;
                opacity: 0.8;
            }
            .delete-btn {
                color: $color-primary;
                .iconfont {
                    padding-right: 10rpx;
                }
                padding: 30rpx;
            }
        }
        .form-item-container {
            width: 100%;
            margin-bottom: 20rpx;
            .btn-item {
                height: 120rpx;
            }
            .selected-item {
                width: 82rpx;
                height: 82rpx;
                margin-right: 25rpx;
            }
            .form-item-label {
                padding: 16rpx 0;
                line-height: 32rpx;
            }
            .form-input {
                padding: 15rpx 25rpx 5rpx;
                min-height: 80rpx;
                color: #383838;
                box-sizing: border-box;
                margin-right: 30rpx;
            }
        }
    } 
    .page-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        height: 122rpx;
        width: 750rpx;
        z-index: 99;
        padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
        padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
        .half-line {
            border-bottom: 1rpx solid;
            width: 200%;
            transform: scale(0.5);
            opacity: 0.2;
        }
        .comment-input-container {
            width: 100%;
            height: 120rpx;
            padding: 25rpx;
            box-sizing: border-box;
            .btn {
                height: 80rpx;
                box-sizing: border-box;
                border-radius: 40rpx;
                color: #fff;
                text-align: center;
            }
            .preview-btn {
                background-color: rgba(0,0,0,0.4);
                width: 160rpx;
            }
            .save-btn {
                background-color: red;
                width: 460rpx;
            }
        }
    }
}